<!DOCTYPE html>
<html>

<head>
    <!-- 图标逐渐变色 -->
    <meta charset="utf-8">
    <title>背景测试</title>


    <style>
        .container{
            position: relative;
        }

        .block{
            line-height: 1;
            font-size: 100px;
            position: absolute;
            height: 100px;
            overflow: hidden;
            color: #FF5722;
        }

        .color-block{
            height: 50px;
            color: #009688;


            /* animation: move 2s infinite; */

        }


        @keyframes move {
            0%{
                height: 0;
            }

            50%{
                height: 100px;
            }

            100%{
                height: 0;
            }
        }

    </style>

</head>

<body>
    <div class="container">
        <div class="block">
            <span>国</span>
        </div>
        <div class="block color-block">
            <span>国</span>
        </div>
    </div>



</body>

</html>